iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
2
Modern Web

初探Vue.js 30天系列 第 23

[Day 23] Laravel + Vue.js - 環境設置

  • 分享至 

  • xImage
  •  

環境介紹

  • 後端框架 Laravel 6
  • 前端框架 Vue.js 2.6

Mac環境

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
brew install composer
  • 利用Composer安裝Laravel

    建立專案名稱為2020_ironman

composer create-project --prefer-dist laravel/laravel 2020_ironman 6.*
  • 安裝Vue
    用npm在Laravel中安裝Vue
npm install --save-dev vue@2.6.12

設置Laravel專案內環境

  • Vue全域變數
    在Laravel resources/js/app.js,設置全域變數Vue
window.Vue = require('vue');

Vue show Hello world!

Goal - 呈現Hello World!在網頁上

  1. 建立Blade (View)

    Laravel將Blade放在resources/views目錄

// hello.blade.php
<html>
    <body>
        <div id="app">
            @{{ message }}
        </div>
        <script src="{{mix('js/app.js')}}"></script>
        <script src="{{mix('js/hello.js')}}"></script>
    </body>
</html>
  1. 建立Vue Instance,並掛載laravle balde

    Laravel將JS放在resources/js目錄下

// hello.js
new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})
  1. 用Laravel Webpack mix編譯JS檔案

    在webpack.mix.js設置要編譯的檔案(hello.js)

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/hello.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');
  1. laravel Route,在routes/web.php設置,此處直接return view (hello blade)
Route::get('/', function () {
    return view('hello');
});
  1. Run Script - Laravel Mix編譯
npm run dev
  1. Start Serve
$ php artisan serve
Starting Laravel development server: http://127.0.0.1:8000

https://ithelp.ithome.com.tw/upload/images/20201007/20108252Xm9jDqo7E1.png

Vue官方有提供Vue Devtools方便檢查元件的資料,也可以查看Vuex的事件與資料變化。
Chrome Plugin
Firefox Plugin


上一篇
[Day 22] Vue Router 前端路由
下一篇
[Day 24] Lodash - JS library
系列文
初探Vue.js 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言